<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  top="5vh"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") {{title}}
  .modal-content
    .modal-content-detail(v-if="item.userId")
      .detail-item.flex
        .detail-item-label 公司logo：
        .detail-item-bd
          .detail-item-head(:style="detail.companyLogoUrl | filterUrl")
      .detail-item
        .detail-item-label 供应商名称：
        .detail-item-bd
          span {{detail.companyName}}
      .detail-item
        .detail-item-label 登录账户：
        .detail-item-bd
          span {{detail.userName}}
      .detail-item
        .detail-item-label 手机号：
        .detail-item-bd
          span {{detail.mobile}}
      .detail-item
        .detail-item-label 公司类型：
        .detail-item-bd
          span {{detail.companyType | filterSupplier}}
      .detail-item.flex
        .detail-item-label 主营业务：
        .detail-item-bd.flex
          .item-tag(v-for="item in detail.styleList") {{item.styleName}}
      .detail-item.flex
        .detail-item-label 主营产品：
        .detail-item-bd.flex.flex-wrap
          .item-tag(v-for="item in detail.supplierProductList") {{item.classificationName}}
    .modal-content-form(v-else)
      el-form(:model="form" label-width="100px", :rules="rules" ref="ruleForm")
        el-form-item(label="账号：" prop="userName" )
          el-input(v-model="form.userName" placeholder="请输入账号")
        el-form-item(label="手机号：" prop="mobile" )
          el-input(v-model="form.mobile" placeholder="请输入手机号")
        el-form-item(label="公司名称：" prop="companyName" )
          el-input(v-model="form.companyName" placeholder="请输入公司名称")
        el-form-item(label="公司类型：" required)
          el-select(v-model="form.companyType")
            el-option(label="国企", :value="1")
            el-option(label="股份制", :value="2")
            el-option(label="私企/集体", :value="3")
            el-option(label="中外合资", :value="4")
            el-option(label="外商独资", :value="5")
            el-option(label="其他", :value="6")
        el-form-item(label="主营业态：" required)
          el-select(v-model="form.stylesList" multiple placeholder="请选择主营业态")
            el-option(v-for="item in styleList", :label="item.styleName", :value="item.styleId", :key="item.styleId")
        el-form-item(label="主营产品：" required)
          el-select(v-model="form.mainBusinessList" multiple placeholder="请选择主营产品")
            el-option(v-for="item in cateList", :label="item.title", :value="item.id", :key="item.id")
      .form-warning 提示：默认初始密码手机号码
  .modal-footer(slot="footer" v-if="item.userId")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="handleClose") 确定
  .modal-footer(v-else slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { postAddSupplier, getStyleList, getCategoryList, getSupplierDetail } from 'api'
import { hex_md5_salt } from '@/utils/md5'
export default {
  name: 'editSupplierDialog',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      title: '添加供应商用户',
      form: {
        userName: '',
        mobile: '',
        companyName: '',
        companyType: '',
        mainBusiness: '',
        mainBusinessList: [],
        styles: '',
        stylesList: [],
        password: ''
      },
      detail: {
        supplierProductList: [],
        styleList: []
      },
      rules: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ]
      },
      styleList: [],
      cateList: []
    }
  },
  methods: {
    beforeOpen () {
      this.form = {
        userName: '',
        mobile: '',
        companyName: '',
        companyType: '',
        mainBusiness: '',
        mainBusinessList: [],
        styles: '',
        stylesList: [],
        password: ''
      }
      if (this.item.userId) {
        this.detail = {}
        this.getSupplierDetail()
        this.title = '查看供应商用户'
      } else {
        this.getStyleList()
        this.getCategoryList()
        this.title = '添加供应商用户'
      }
    },
    handleClose () {
      this.$emit('close')
    },
    async getStyleList () {
      try {
        const { ResultSet } = await this.$axios.post(getStyleList)
        this.styleList = ResultSet.userData.styleList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getCategoryList () {
      try {
        const { ResultSet } = await this.$axios.post(getCategoryList)
        this.cateList = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getSupplierDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getSupplierDetail, { userId: this.item.userId })
        this.detail = ResultSet.Result[0]
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        try {
          if (valid) {
            if (!this.form.stylesList.length) {
              this.$message.error('请选择主营业态！')
              return
            }
            if (!this.form.mainBusinessList.length) {
              this.$message.error('请选择主营产品！')
              return
            }
            let query = { ...this.form }
            query.styles = query.stylesList.join(',')
            query.mainBusiness = query.mainBusinessList.join(',')
            query.password = hex_md5_salt(encodeURIComponent(query.mobile))
            await this.$axios.post(postAddSupplier, { ...query })
            this.$message.success('添加供应商成功！')
            this.$emit('confirm')
          }
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    }
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content {
  padding: 16px 0;
}
.form-warning {
  text-align: right;
  font-size: 12px;
  line-height: 20px;
  color: #FF2E42;
}
.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  &.flex {
    align-items: flex-start;
    .detail-item-label {
      line-height: 22px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .detail-item-label {
    font-size: 14px;
    line-height: 22px;
    color: #8B8EAB;
    width: 100px;
    text-align: right;
  }
  .detail-item-bd {
    margin-left: 8px;
    &.flex {
      display: flex;
    }
    &.flex-wrap {
      flex-wrap: wrap;
    }
    
    .item-tag {
      padding: 1px 10px;
      margin-bottom: 8px;
      background: #F4F1FF;
      border-radius: 6px;
      margin-right: 8px;
      font-size: 14px;
      line-height: 22px;
      color: #64698F;
    }
    .detail-item-head {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #F6F6F9;
    }
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 22px;
      color: #3E4373;
    }
  }
}
.modal-content-form {
  .el-select {
    width: 100%;
  }
}
</style>
